<template>
  <div class="BannerBox">
    <div class="BannerContent">
      <div class="prevBox" @click="$refs.carousel.prev()">
        <i class="iconfont icon-zuo"></i>
      </div>
      <el-carousel
        :interval="500000"
        arrow="never"
        height="284px"
        ref="carousel"
        class="bannerDom"
      >
        <el-carousel-item v-for="(item, index) in bannerdata" :key="index">
          <img :src="item.imageUrl" alt="" class="BannerImg" />
        </el-carousel-item>
      </el-carousel>
      <div class="DowBtnBox">
        <div class="DowBtn"></div>
        <p class="DowTxt">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
      </div>
      <div class="nextBox" @click="$refs.carousel.next()">
        <i class="iconfont icon-you"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { getBannerUrl } from "@/api";
export default {
  data: function () {
    return {
      bannerdata: [],
    };
  },
  created() {
    this.getBannerFn();
  },
  methods: {
    getBannerFn() {
      getBannerUrl({ type: 0 }).then((res) => {
        // console.log(res);
        this.bannerdata = res.banners;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__container {
  height: 100%;
}
.BannerContent {
  width: 982px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
}
.BannerBox {
  height: 284px;
  background-image: url("http://p1.music.126.net/4O9JG5ob4CtnYz37yjHVqg==/109951165459640346.jpg?imageView&blur=40x20");
}
.BannerImg {
  width: 730px;
  height: 100%;
}
.DowBtnBox {
  width: 254px;
  background-image: url("./../../assets/imges/bannerDowApp.png");
}
.DowBtn {
  margin: 186px 0 0 19px;
  width: 215px;
  height: 56px;
}
.bannerDom {
  flex: 1;
}
.prevBox {
  position: absolute;
  left: -70px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 60px;
}
.nextBox {
  position: absolute;
  right: -70px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 60px;
  line-height: 60px;
}
.nextBox i,
.prevBox i {
  font-size: 40px;
  color: #eee;
}
.DowTxt {
  margin: 10px auto;
  text-align: center;
  color: #8d8d8d;
  font-size: 12px;
}
</style>
<style lang="scss">
.el-carousel__button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #b9bbbe;
}
.el-carousel__indicator.el-carousel__indicator--horizontal.is-active {
  .el-carousel__button {
    background-color: #b90b0b;
  }
}
</style>